<template>
  <div id="material" style="width: 1100px;margin-left: 15%">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="课程资料" name="first">
        <div>
          <el-input v-model="input" placeholder="请输入内容" style="width: 200px"></el-input>
          <el-button type="primary" icon="el-icon-search"></el-button>
          <el-button type="primary">上传资料</el-button>
        </div>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="filename"
              label="文件名"
              width="600">
            </el-table-column>
            <el-table-column
              prop="name"
              label="上传者">
            </el-table-column>
            <el-table-column
              prop="filesize"
              label="大小">
            </el-table-column>
            <el-table-column
              prop="gmt_creat"
              label="创建日期">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick2(scope.row)" type="text" size="small">下载</el-button>
                <el-button @click="handleClick3(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Material",
  data(){
    return{
      activeName: 'first',
      input: '',
     tableData: [{
       filename: '.m2.rar',
       name: 'hjw',
       filesize: '50MB',
       gmt_creat:'2016-05-02'
     }, {
       filename: '.m2.rar',
       name: 'hjw',
       filesize: '50MB',
       gmt_creat:'2016-05-02'
     }, {
       filename: '.m2.rar',
       name: 'hjw',
       filesize: '50MB',
       gmt_creat:'2016-05-02'
     }, {
       filename: '.m2.rar',
       name: 'hjw',
       filesize: '50MB',
       gmt_creat:'2016-05-02'
     }]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClick2(row){
      console.log(row)
    },
    handleClick3(row){
      console.log(row)
    }
  }
}
</script>

<style scoped>

</style>
